
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
	<style>
		*{
			padding:0;
			margin:0;
		}
		ul,li,ol{
			list-style: none;
		}
	    .upload-wrap{
		display:block;
		width:650px;
		text-align:center;
		background: #fefefe;
		border-radius:3px;
		margin: 100px auto;
		/*border: 1px solid #efefef;*/
	    	padding: 10px;
	    }
	    .upload-box>div:first-child{
		overflow:hidden;
		overflow-x:scroll;
	    }
	    .upload-box input[type="file"] {
		display:block;
		width:100%;
		height:100%;
		opacity:0;
		position:absolute;
		top:0;
		left:0;
		z-index: 100;
	    }
	    .upload-box input[type="submit"]{
	    	color: #fff;
	    background-color: #108ee9;
	    border-color: #108ee9;
	    	display: inline-block;
	    	width:100px;
	    	line-height: 35px;
	    	margin:10px;
	    	border:0;
	    	outline:none;
	    }
	    .upload-box span{
		display: inline-block;
    		width: 100px;
    		height: 100px;
    		border: 1px dashed #d9d9d9;
    		border-radius: 3px;
	    	position:relative;
	    }
	    .upload-box span:hover{
	    	border-color:#108ee9;
	    }
	    .file-box{
	    	position: relative;
	    }
	    .file-box>div{
	    	overflow: hidden;
	    	overflow-x:scroll;
	    	display: none;
	    }
	    .file-box>div.on{
	    	display: block;
	    }
	    .file-box img{
	    	height:84px;
	    	width:84px;
	    }
	    .file-box ul{
	    	width:100%;
	    }
	    .file-box li{
	    	display: inline-block;
	    	width:100px;
	    	height:100px;
	    	padding:3px;
	    }
	    .upload-box span:after{
		content: "+";
		display:block;
		font-size:50px;
		width: 100px;
		line-height:100px;
		color:#ccc;
		position:absolute;
		top:0;
		left:0;
	    }
	     .upload-box span:hover:after{
	     	color:#108ee9;
	     }
	     .btn-box:before{
	     	content: "";
	     	display: block;
	     	width:90px;
	     	border: 1px dashed #d9d9d9;
	     	border-width:1px 0 0 0;
	     	margin: 10px auto 0;

	     }
	</style>
	<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
    </head>    
    <body>
	<div>
		<div class="upload-wrap" style="width:660px;height:10px; margin-top:10px;font-size:10px;text-align:right;">您好！管理员。<a href="/login/logout">登出</a></div>
	    <div class="upload-wrap" id="uploadWrap">
		<form method="post" action="/image/upload" enctype="multipart/form-data">
		    <div class="upload-box">
			<div>
			    <div class="file-box">
			    	<div :class="{on: files.length>0}">
			    		<ul>
			    			<li v-for="(item) in files">
			    				<img  :src="item" alt="" />
			    			</li>
			    		</ul>
			    	</div>
			    	<div :class="{on: files.length<1}">
						 <span>
						   	<input name="uploads[]" type="file" multiple @change="onFileChange(event)">
						 </span>
			    	</div>
			    </div>
			</div>
			<div class="btn-box">
			    <input type="submit" name="uploadpic" value="上传">
			</div>
		    </div>
		</form>
	    </div>
	</div>	
    </body>
    <script type="text/javascript">
		new Vue({
			el: "#uploadWrap",
			data: {
				files: []
			},
			methods: {
				onFileChange: function(evt){
					var self = this;
					var files =  evt.target.files;
					if(files && files.length){
						console.log(files);
						self.files = [].map.call(files, function(item){
							return URL.createObjectURL(item);
						});
					} 
				}
			},
			created: function(){

			}
		});

	</script>
</html>
